<md-dialog aria-label="Demo Dialog" class="demo-dialog" md-theme="{{theme}}" md-theme-watch layout="row">
	<md-sidenav md-is-locked-open="menuOpen">
		<md-toolbar layout="row" class="md-accent md-tall">
			<div class="mcg-md-profile" flex layout="column" layout-align="end start">
				<img ng-src="{{imagePath}}" class="md-avatar" />
				<span class="mcg-username">Example Profile</span>
				<span class="mcg-email">example@example.com</span>
			</div>
		</md-toolbar>
		<md-list flex>
			<md-subheader class="md-no-sticky md-accent">3 line item (with hover)</md-subheader>
			<md-list-item class="md-3-line" ng-repeat="item in todos" ng-click="null">
				<img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" />
				<div class="md-list-item-text" layout="column">
					<h3>{{ item.who }}</h3>
					<h4>{{ item.what }}</h4>
					<p>{{ item.notes }}</p>
				</div>
			</md-list-item>
		</md-list>
	</md-sidenav>
	<md-content flex layout="column" layout-align="center stretch">
		<md-toolbar layout="column" layout-align="center center" layout-padding class="md-tall">
			<span style="margin-top: 5px;">Demo Your Theme</span>
		</md-toolbar>
		<md-content flex layout="column" layout-margin layout-padding>
			<div layout="row">
				<md-card flex="50">
					<md-card-title>
						<md-card-title-text>
							<span class="md-headline">Card with image</span>
							<span class="md-subhead">Large</span>
						</md-card-title-text>
						<md-card-title-media>
							<div class="md-media-lg card-media"></div>
						</md-card-title-media>
					</md-card-title>
					<md-card-actions layout="row" layout-align="end center">
						<md-button>Action 1</md-button>
						<md-button>Action 2</md-button>
					</md-card-actions>
				</md-card>
				<md-card flex="50">
					<md-card-title>
						<md-card-title-text>
							<span class="md-headline">Card with image</span>
							<span class="md-subhead">Large</span>
						</md-card-title-text>
						<md-card-title-media>
							<div class="md-media-lg card-media"></div>
						</md-card-title-media>
					</md-card-title>
					<md-card-actions layout="row" layout-align="end center">
						<md-button>Action 1</md-button>
						<md-button>Action 2</md-button>
					</md-card-actions>
				</md-card>
			</div>
			<form flex name="userForm">

				<div layout-gt-sm="row">
					<md-input-container class="md-block" flex-gt-sm>
						<label>First name</label>
						<input ng-model="user.firstName">
					</md-input-container>
				</div>

				<md-input-container class="md-block">
					<label>Address</label>
					<input ng-model="user.address">
				</md-input-container>

				<md-input-container md-no-float class="md-block">
					<input ng-model="user.address2" placeholder="Address 2">
				</md-input-container>

				<div layout-gt-sm="row">
					<md-input-container class="md-block" flex-gt-sm>
						<label>City</label>
						<input ng-model="user.city">
					</md-input-container>

					<md-input-container class="md-block" flex-gt-sm>
						<label>Postal Code</label>
						<input name="postalCode" ng-model="user.postalCode" placeholder="12345" required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">

						<div ng-messages="userForm.postalCode.$error" role="alert" multiple>
							<div ng-message="required" class="my-message">You must supply a postal code.</div>
							<div ng-message="pattern" class="my-message">That doesn't look like a valid postal code.
							</div>
							<div ng-message="md-maxlength" class="my-message">
								Don't use the long version silly...we don't need to be that specific...
							</div>
						</div>
					</md-input-container>
				</div>

				<md-input-container class="md-block">
					<label>Biography</label>
					<textarea ng-model="user.biography" md-maxlength="150" rows="5" md-select-on-focus></textarea>
				</md-input-container>

			</form>
		</md-content>
		<div class="md-actions">
			<md-button ng-click="closeDialog()">
				Close Dialog
			</md-button>
		</div>
	</md-content>
</md-dialog>